package com.example.admin.hellochartstest;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;

import java.util.ArrayList;
import java.util.List;

import lecho.lib.hellocharts.formatter.LineChartValueFormatter;
import lecho.lib.hellocharts.formatter.SimpleLineChartValueFormatter;
import lecho.lib.hellocharts.gesture.ContainerScrollType;
import lecho.lib.hellocharts.gesture.ZoomType;
import lecho.lib.hellocharts.listener.ViewportChangeListener;
import lecho.lib.hellocharts.model.Axis;
import lecho.lib.hellocharts.model.AxisValue;
import lecho.lib.hellocharts.model.Line;
import lecho.lib.hellocharts.model.LineChartData;
import lecho.lib.hellocharts.model.PointValue;
import lecho.lib.hellocharts.model.ValueShape;
import lecho.lib.hellocharts.model.Viewport;
import lecho.lib.hellocharts.util.ChartUtils;
import lecho.lib.hellocharts.view.LineChartView;
import lecho.lib.hellocharts.view.PreviewLineChartView;

import static com.example.admin.hellochartstest.R.id.previewLineChartView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private LineChartView chartView;
    private PreviewLineChartView mPreLineChartView;//实例化预览折线图
    private Button but_1;
    private Button but_2;

    //    折线集合（add多个line就会显示多条线）
    List<Line> chartlines = new ArrayList<Line>();
    //    横坐标集合，可以设置标注名称，就是x轴的值集合，可以是0-100，也可以是10000-20000
    List<AxisValue> mAxisXValues = new ArrayList<AxisValue>();
    //    点的集合，顾名思义一个point，就有他所对应的x y值，假如有个点的值是（5,100）x=5 y=100
    List<PointValue> pointValues = new ArrayList<PointValue>();
    //    折线，多条折线可以new多个线，要显示谁，就在line集合里add谁
    Line chartline = new Line();
    //    线上的数据，鸡肋但必须得用
    LineChartData lineChartData = new LineChartData();
    //预览区域的数据
    private LineChartData mPreChartData;
    //    定义格式，小数点等等信息
    LineChartValueFormatter chartValueFormatter = new SimpleLineChartValueFormatter(2);
    //    X轴、Y轴
    Axis axisX = new Axis();
    Axis axisY = new Axis();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        chartView=(LineChartView)findViewById(R.id.chartView);
        mPreLineChartView=(PreviewLineChartView )findViewById(previewLineChartView);

        but_1=(Button)findViewById(R.id.but_1);
        but_2=(Button)findViewById(R.id.but_2);
        but_1.setOnClickListener(this);
        but_2.setOnClickListener(this);

    }
    public void setKLine(int type,List<DateForLine> list){
//        清空数据，将不影响下一次点击按钮 传过来一个新的list的显示
        chartlines.clear();
        mAxisXValues.clear();
        pointValues.clear();

        /*
        * 这个循环是循环为x轴（x底端轴线）增加值应该只能是float类型的，当然int可以
        */
        for(int i=0;i<list.size();i++){
//            第一进来的值假如是“201703041230”，处理完之后应该是4*24+12
            String time=list.get(i).getTime();
            AxisValue axisValue=new AxisValue(i);
//            这句话就关键了，你可以随意设置这个位置显示的东西，string类型的随意来
//            我这边想设置，几月几日几时
            axisValue.setLabel(subTimeSecond(time));
            mAxisXValues.add(axisValue);
        }
//        x轴完事了，该布点了
        for(int i=0;i<list.size();i++){
//            第一点的坐标假如是（4*24+12，25.5）  那么pointValue的参数就应该是这个
            String time=list.get(i).getTime();
//            Log.d("河北", "setKLine: "+sparseTimeSecond(time));
            PointValue pointValue=new PointValue(i,Float.parseFloat(list.get(i).getValue())*100);
//            这个点的标注信息，String的随便来
            if(type==1){
                pointValue.setLabel(list.get(i).getValue()+"℃");
//                温度显示小数
                chartline.setFormatter(chartValueFormatter);
            }else if(type==2){
                pointValue.setLabel(list.get(i).getValue().substring(0,9));
//                温度显示整数就不用设置Formatter了
            }
//            把这个点添加到集合里去,等会显示用
            pointValues.add(pointValue);
        }
//        把点的集合放在线上，显示多条线 就用不同的line分别添加不同的values
        chartline.setValues(pointValues);
//        线的颜色
        chartline.setColor(Color.RED);
        chartline.setStrokeWidth(2);
//        点的颜色
        chartline.setPointColor(Color.RED);
//        形状，ValueShape提供了几个
        chartline.setShape(ValueShape.CIRCLE);
//        线的透明度
//        chartline.setAreaTransparency(0);
//        点的大小
        chartline.setPointRadius(3);
//        点上的标注信息，刚才 pointValues里面每个点的标注
        chartline.setCubic(true);
//        阴影面积
        chartline.setFilled(false);
//        是否用线显示。如果为false 则没有曲线只有点显示
        chartline.setHasLines(true);
//        是否用点显示。如果为false 则没有点
        chartline.setHasPoints(true);
//        点的标注是否显示
        chartline.setHasLabels(true);
//        线的粗细
        chartline.setStrokeWidth(2);
//        显示几条线，就可以分别设置每一条线，然后add进来
        chartlines.add(chartline);

//        线的集合放在chart数据中，
        lineChartData.setLines(chartlines);
//将相同的数据也设置到预览区 并更改颜色
        mPreChartData = new LineChartData(lineChartData);
        mPreChartData.getLines().get(0).setColor(ChartUtils.DEFAULT_DARKEN_COLOR);
        previewXY();
/*        x轴上面的值，就是刚才mAxisXValues的值
          5个参数分别是：
          1-例如4*24+12 显示为4日12时
          2-是否有x轴网格线
          3-x轴信息标注颜色是黑色
          4-x轴网格线白色
          5-x轴信息标注字体12
          6-x轴的大名
          Y轴也是这么设置，当你想点击不同的按钮，显示不同的信息时可用type进行处理
*/
        axisX.setValues(mAxisXValues).setHasLines(true).setTextColor(Color.parseColor("#B0B0B0")).setLineColor(Color.WHITE).setTextSize(12).setName("时间");;
        axisY.setHasLines(true).setTextColor(Color.parseColor("#B0B0B0")).setLineColor(Color.WHITE);//Color.parseColor("#B0B0B0")
        if(type==1){
            axisY.setName("温度");
        }else if(type==2){
            axisY.setName("湿度");
        }

//        X轴上的标注数量,点少的时候可以这么用，点多的时候，就不建议这么用了
        axisX.setMaxLabelChars(4);
//        x 轴在底部
        lineChartData.setAxisXBottom(axisX);
//        x 轴在顶部
//        lineChartData.setAxisXTop(axisX);
//        y 轴在左，也可以右边
        lineChartData.setAxisYLeft(axisY);

//        这两句话设置折线上点的背景颜色，默认是有一个小方块，而且背景色和点的颜色一样
//        如果想要原来的效果可以不用这两句话，我的显示的是透明的
        lineChartData.setValueLabelBackgroundColor(Color.TRANSPARENT);
        lineChartData.setValueLabelBackgroundEnabled(false);
        lineChartData.setValueLabelsTextColor(Color.parseColor("#2CB5E6"));
        //将预览图线上的数字不显示
        mPreChartData.setValueLabelBackgroundColor(Color.TRANSPARENT);
        mPreChartData.setValueLabelBackgroundEnabled(false);
        mPreChartData.setValueLabelsTextColor(Color.TRANSPARENT);

//        把数据放在chart里，设置完这句话其实就可以显示了
        chartView.setLineChartData(lineChartData);
        mPreLineChartView.setLineChartData(mPreChartData);   //设置预览区数据
       /* previewLineChartView.setZoomEnabled(true);//设置是否支持缩放
//        previewLineChartView.setOnValueTouchListener(LineChartOnValueSelectListener touchListener);//为图表设置值得触摸事件
        previewLineChartView.setInteractive(true);//设置图表是否可以与用户互动
        previewLineChartView.setValueSelectionEnabled(true);//设置图表数据是否选中进行显示
        previewLineChartView.setPreviewColor(Color.BLUE);//设置预览图的颜色
        previewLineChartView.setLineChartData(lineChartData);//为图表设置数据，数据类型为LineChartData或者CoulmnChartData
*/
//        设置行为属性，支持缩放、滑动以及平移，设置他就可以自己设置动作了
        chartView.setInteractive(true);
//        可放大
        chartView.setZoomEnabled(true);
//        chartView.setScrollEnabled(false);              //暂时禁用滚动，看效果
//        我这边设置横向滚动
        chartView.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
//        设置可视化视图样式，这里能做的东西非常多，
        final Viewport v = new Viewport(chartView.getMaximumViewport());
//        我设置两种。点击不同按钮时，y轴固定最大值最小值不一样
//        这里可以固定x轴，让y轴变化，也可以x轴y轴都固定，也就是固定显示在你设定的区间里的点point（x，y）
        if(type==1){
            v.top=50;
            v.bottom=-50;
        }else if(type==2){
            v.top=10;
            v.bottom=0;
        }
//        Viewport port = chart.getMaximumViewport();
//        port.height()=port.top-port.bottom;
//        port.width() = port.right - port.left; 其他

//        这句话非常关键，上面两种设置，来确定最大可视化样式
//        我们可以理解为，所有点放在linechart时，整个视图全看到时候的样子，也就是点很多很多，距离很紧密
        chartView.setMaximumViewport(v);
//        接着我们要设置，我们打开这个页面时显示的样子
//        如果你想所有，这两句话就不用了
//        但是我只显示5个点以内 刚才插入的点应该是...（4*24+8，-15.5）（4*24+9，-15.5）（4*24+10，-3.5）（4*24+11，20.0）（4*24+12，8.5）
//        x轴最右边就应该是x=4*24+12 的点 最左边就应该是x=4*24+8的点
//        当然这个非常灵活，也可以固定显示y轴 最小多少，最大多少
        v.left=0;//parseHour2Ten(list.get(list.size()-5).getTime())
        v.right =3;
//        确定上两句话的设置
        chartView.setCurrentViewport(v);

//        还可以设置当前的动画效果，有兴趣的同学可以试一试
        /*chartView.setViewportAnimationListener(new ChartAnimationListener() {
            @Override
            public void onAnimationStarted() {
            }
            @Override
            public void onAnimationFinished() {
                chartView.setMaximumViewport(v);
                chartView.setViewportAnimationListener(null);

            }
        });*/
//        chartView.setCurrentViewport(v);
//预览区滑动监听
        mPreLineChartView.setViewportChangeListener(new ViewportListener());
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.but_1:
                List<DateForLine> list1=new ArrayList<>();
                list1.add(new DateForLine("2017-11-05 12:36:19.387","3.9215021E-2"));
                list1.add(new DateForLine("2017-11-05 12:36:18.183","3.7307672E-2"));
                list1.add(new DateForLine("2017-11-05 12:36:16.963","3.5877161E-2"));
                list1.add(new DateForLine("2017-11-05 12:36:16.743","4.2076044E-2"));
                list1.add(new DateForLine("2017-11-05 12:36:15.540","4.3983392E-2"));
                list1.add(new DateForLine("2017-11-05 12:36:15.323","3.8261347E-2"));
                list1.add(new DateForLine("2017-11-05 12:36:15.120","3.7784509E-2"));
                list1.add(new DateForLine("2017-11-05 12:36:14.900","3.6830835E-2"));
                list1.add(new DateForLine("2017-11-05 12:36:14.697","3.9691858E-2"));
                list1.add(new DateForLine("2017-11-05 12:36:14.477","3.3492975E-2"));
                list1.add(new DateForLine("2017-11-05 12:36:14.277","3.8261347E-2"));
                list1.add(new DateForLine("2017-11-05 12:36:14.057","3.9691858E-2"));
                list1.add(new DateForLine("2017-11-05 12:36:13.853","4.0645532E-2"));
                list1.add(new DateForLine("2017-11-05 12:36:13.637","3.5877161E-2"));
                list1.add(new DateForLine("2017-11-05 12:36:13.447","4.1599207E-2"));
                list1.add(new DateForLine("2017-11-05 12:36:13.227","3.7784509E-2"));
                list1.add(new DateForLine("2017-11-05 12:32:50.027","4.3506559E-2"));
                list1.add(new DateForLine("2017-11-05 12:32:48.793","4.5890741E-2"));
                list1.add(new DateForLine("2017-11-05 12:32:48.607","4.1599207E-2"));
                list1.add(new DateForLine("2017-11-05 12:32:47.403","3.9215021E-2"));
                setKLine(2,list1);
                break;
            case R.id.but_2:
                List<DateForLine> list2=new ArrayList<>();
                list2.add(new DateForLine("201703040130","70"));
                list2.add(new DateForLine("201703040230","51"));
                list2.add(new DateForLine("201703040330","23"));
                list2.add(new DateForLine("201703040430","42"));
                list2.add(new DateForLine("201703040530","19"));
                list2.add(new DateForLine("201703040630","5"));
                list2.add(new DateForLine("201703040730","63"));
                list2.add(new DateForLine("201703040830","77"));
                list2.add(new DateForLine("201703040930","42"));
                list2.add(new DateForLine("201703041030","20"));
                list2.add(new DateForLine("201703041130","11"));
                list2.add(new DateForLine("201703041230","44"));
                setKLine(1,list2);
                break;
        }
    }

    //    把我得到的时间格式处理成小时
    public String subTimeMonth(String time){
        return time.substring(4,6);
    }
    public String subTimeDay(String time){
        return time.substring(6,8);
    }
    public String subTimeHour(String time){
        return time.substring(8,10);
    }
    /*
    *假如回来的时间是"201703151955"  2017年3月19日19:55
    * 按照我的需求只要24小时内的值
    * 在x轴上这个时间的值应该是15*24+19     2017-11-05 12:32:47.403
     */
    /*public int parseHour2Ten(String time){
        return Integer.parseInt(time.substring(6,8))*24+
                Integer.parseInt(time.substring(8,10));
    }*/
    /**
     * 预览区滑动监听
     */
    private class ViewportListener implements ViewportChangeListener {
        @Override
        public void onViewportChanged(Viewport newViewport) {
            // 这里切记不要使用动画，因为预览图是不需要动画的
            chartView.setCurrentViewport(newViewport);         //直接设置当前窗口图表
        }
    }
    /**
     * 根据X/Y方向预览
     */
    private void previewXY() {
        Viewport tempViewport = new Viewport(chartView.getMaximumViewport());
        float dx = tempViewport.width() / 4;                //宽高都是1/4
        float dy = tempViewport.height() / 4;
        tempViewport.inset(dx, dy);                         //设置临时窗口大小
        mPreLineChartView.setCurrentViewportWithAnimation(tempViewport);
        //水平垂直都可以缩放
        mPreLineChartView.setZoomType(ZoomType.HORIZONTAL_AND_VERTICAL);
    }
    public String subTimeSecond(String time){
        return time.substring(0,19);
    }
    /*public int sparseTimeSecond(String time){
        return Integer.parseInt(time.substring(17,19));
    }

    public Long sparseLong(String time){
        String time1=time.substring(5,22);
        SimpleDateFormat formatter = new SimpleDateFormat("MM-dd HH:mm:ss.SSS");
        Long s = null;
        try {
            Date dt=formatter.parse(time1);
            s= dt.getTime();

        } catch (ParseException e) {
            e.printStackTrace();
        }
        return s;
    }*/
    /*public int parseSecond(String time){
        int a=Integer.parseInt(time.substring(14,16))*60+
                Integer.parseInt(time.substring(17,19));
        return a;
    }*/
}